<template>
	<view class="sign_bg">
		
		<view class="sign_conent_box">
		
			<view class="sign_conent">

				<view class="sign_conent_title">
					{{$t('bico.W773')}}
					<span class="sign_conent_title_span"> {{count}} </span>
					{{$t('bico.W774')}}
				</view>

				<view class="sign_conent_title">
					{{$t('bico.W775')}}<span class="sign_conent_title_span"> {{coin}} </span> {{$t('bico.W776')}}
				</view>

				<view class="sign_list_aligns">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
							<!--  -->
							<view class="scroll_view_itemsv">
								<view class="scroll_view_item">
									<view class="scroll_view_item_img_box">
										<image src="../../static/sign_bg.png" class="scroll_view_item_img" mode=""></image>
										<view class="scroll_view_item_top">{{ item.discount }}</view>
										<!-- <view class="scroll_view_item_bottom">USDT</view> -->
									</view>
									<view class="scroll_view_item_tips">{{$t('bico.W777')}} {{ item.day }} {{$t('bico.W778')}}</view>
								</view>
								<view class="scroll_xian" v-show="index !== sign_list.length - 1"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="mt20 wt80 h30 lh30 radius4 mauto bgBlue white tc" @click="cksigin">{{$t('bico.W779')}}</view>
				<u-gap height="60"></u-gap>
				<u-divider color="#8186a7" half-width="200" border-color="#8186a759">{{$t('bico.W780')}}</u-divider>
				
				<view class="mt29" @click="funsItemClick(18)">
					<view class="mt20 wt80 h30 lh30 radius4 mauto bgBlue2 white tc">{{$t('bico.W781')}}</view>
				</view>
				
				<u-gap height="80"></u-gap>
				<view class="mtt45">
				    <u-collapse  event-type="close"  @change="change">
						<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
							<view class="collapse-item">
								{{item.body}}
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sign_list: {},
			count:Number,
			today:String,
			coin:String
		},
		data() {
			return {
				itemList: [{
									head: this.$t("bico.W782"),
									body: this.$t("bico.W783"),
									open: true,
									disabled: true
								},{
									head: this.$t("bico.W784"),
									body: this.$t("bico.W785"),
									open: false,
								}],
			};
		},
		methods: {
			cksigin() {
				this.$emit('click', '');
			},
			funsItemClick(index) {
				if (index == 18) {
					uni.navigateTo({
						url: '/pages/share/share' //邀请好友
					})
				};
				
			}
		}
	};
</script>

<style lang="scss">
	.sign_conent_box {
		width: 100%;
		display: flex;
		justify-content: center;
		/*margin-top: 50upx;*/
		
		
		.sign_conent {
			width: 686upx;
			background: white;
			border-radius: 20upx;
			padding: 14px 0px;
			margin-top: 200px;
			box-sizing: border-box;
			.sign_conent_title {
				
				    width: 100%;
				    font-size: 16px;
				    /* font-weight: bold; */
				    color: #727790;
				    padding-left: 10px;
				    padding-right: 10px;
					    line-height: 1.8;
				
				.sign_conent_title_span {
					    color: #FF5722 !important;
					    font-size: 18px;
					    padding-left: 10px;
					    padding-right: 10px;
					    font-weight: bold;
					    background: #6f65f31c;
					    border-radius: 10px;
				}
			}
			.sign_list_aligns {
				width: 100%;
				padding: 48upx 0 64upx 0;
				box-sizing: border-box;
				    padding-left: 10px;
				    padding-right: 10px;
				.scroll-view_H {
					width: 100%;
					display: flex;
					white-space: nowrap;
					.scroll_view_items {
						display: inline-block;
					}
					.scroll_view_itemsv {
						display: flex;
					}
					.scroll_view_item {
						.scroll_view_item_img_box {
							width: 108upx;
							height: 108upx;
							position: relative;
							.scroll_view_item_top {
								    font-size: 22px;
								    color: #FFEB3B;
								    font-weight: bold;
								    position: absolute;
								    top: 40px;
								    width: 100%;
								    text-align: center;
								    z-index: 1;
									font-family: Times New Roman,Times,serif;
							}
							.scroll_view_item_bottom {
								font-size: 12upx;
								color: #ffe29d;
								position: absolute;
								bottom: 18upx;
								left: 42upx;
								z-index: 2;
							}
						}
						.scroll_view_item_tips {
							    width: 54px;
							    text-align: center;
							    font-size: 14px;
							    padding-top: 24px;
							    font-weight: bold;
							    color: #555b77;
						}
						.scroll_view_item_img {
							width: 54px;
							height: 68px;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 0;
						}
					}
					.scroll_xian {
						
						width: 32px;
						height: 1px;
						background: #ececec;
						margin-top: 36px;
					}
				}
			}
			.sign_conent_btn {
				width: 100%;
				border-radius: 6px;
				background: linear-gradient(270deg, #3F51B5 0%, #673AB7 100%);
				color: #ffffff;
				text-align: center;
				padding: 22upx 0;
				font-size: 32upx;
			}
			.wt80 {
			    width: 60%;
			}
			.h30 {
			    height: 10vw;
			}
			.lh30 {
			    line-height: 10vw;
			}
			.radius4 {
			    border-radius: 30px;
			}
			.bgBlue {
			    background: #6f65f3;
				    box-shadow: 1px 2px 2px #3f51b582;
			}
			.mt29{
				margin-top: 20px;
			}
			.bgBlue2 {
			    background: #FF9800;
			}
			.mtt45{
				padding-left: 10px;
				padding-right: 10px;
			}
			.mt20 {
			    margin-top: 0px;
			}
			
		}
	}
</style>